<template>
  <div class="panel">
    <div class="header">HTTP 设置</div>
    <div class="form">
      <div class="row">
        <label>代理(HTTP/SOCKS)</label>
        <input v-model="local.proxy" placeholder="例如 http://127.0.0.1:7890" />
      </div>
      <div class="row">
        <label>速度限制 (KB/s)</label>
        <input type="number" min="0" v-model.number="local.speedLimitKBs" />
      </div>
      <div class="row">
        <label>最大并发</label>
        <input type="number" min="1" v-model.number="local.maxConcurrent" />
      </div>
      <div class="actions">
        <button class="primary" @click="onSave">保存</button>
        <button @click="onReset">重置</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
  settings: { type: Object, default: () => ({}) }
})
const emit = defineEmits(['save-settings'])

const local = reactive({ proxy: '', speedLimitKBs: 0, maxConcurrent: 3 })

function assignFromProps(){
  local.proxy = props.settings?.proxy || ''
  local.speedLimitKBs = props.settings?.speedLimitKBs || 0
  local.maxConcurrent = props.settings?.maxConcurrent || 3
}

watch(() => props.settings, assignFromProps, { deep: true, immediate: true })

function onSave(){
  emit('save-settings', { proxy: local.proxy, speedLimitKBs: local.speedLimitKBs, maxConcurrent: local.maxConcurrent })
}
function onReset(){ assignFromProps() }
</script>

<style scoped>
.panel { padding: 12px; display: grid; gap: 12px; }
.header { font-weight: 600; font-size: 14px; }
.form { display: grid; gap: 10px; max-width: 560px; }
.row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; }
input { height: 30px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: transparent; color: #e6e6e6; }
.actions { display: flex; gap: 8px; }
button { height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #e6e6e6; }
button.primary { background: #2b6cb0; border-color: #2b6cb0; }
</style>
